<template>
  <div class="chose-plotw">
    <head-top :head-title="'选择小区-'+cityName" go-back="true" choseCity="切换城市" @city="toChoseCity"></head-top>
    <div class="plot-wrapper">
      <div class="search">
        <div class="search-wrapper">
          <input ref="inputs" type="text" placeholder="请输入小区的名称" @keyup.enter="searchVillage"  @input="searchVillage" v-model="keyword">
          <span class="search-icon" @click="searchVillage"></span>
        </div>
        <div class="now-plot">所在小区</div>
      </div>
      <!-- <ul>
        <li v-for="(item,index) in lists" :key="index" tag="div" class="line" @click="goHome(item)">
          {{item.title}}
        </li>
      </ul> -->
    </div>
    <mt-index-list>
      <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
        <div v-for="(list,index) in item" @click="goHome(list)">
          <mt-cell :title="list.title"></mt-cell>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
// import commonUrl from '../../common/js/commonUrl.js'
import {getVillage, searchKeyword} from '../../api/cityVillage.js'
// import bus from '../../common/js/commonvue.js'
import {saveVillageId, saveTitle, loadCity} from '../../common/js/cache.js'
export default {
  name: 'ChosePlot',
  data () {
    return {
      data: {},
      keyword: '',
      cityName: loadCity()
      // cityName: loadCity() || '杭州'
    }
  },
  created() {
    this._getVillage()
  },
  methods: {
    _getVillage() {
      getVillage(this.$route.params.id).then(res => {
        this.data = res.data
      })
    },
    toChoseCity () {
      this.$router.push({
        path: '/home/ChoseCity'
      })
    },
    searchVillage() {
      searchKeyword(this.keyword).then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    },
    goHome(item) {
      saveVillageId(item.id)
      saveTitle(item.title)
      this.$router.push({
        path: '/Home'
      })
    }
  },
  components: {
    headTop
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/sass/mixin.scss';
.chose-plotw{
  .mint-indexlist {
   margin-top: 84px;
  }
  .mint-cell {
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
  }
  .mint-indexlist-content{
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  .mint-cell-wrapper {
    background-size: 120% 0px;
  }
}
  .plot-wrapper{
    width: 100%;
    padding-top: 40px;
    background: #fff;
    .search {
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      background-color: #fff;
      text-align: center;
      height: 44px;
      line-height: 44px;
      .now-plot{
        padding-left: 10px;
        text-align: left;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        background-color: #D9D9D9;
      }
      .search-wrapper {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          @include bgimg('./images/search');
          vertical-align: middle;
        }

      }
    }
  }
</style>
